<template>
  <div>
    <el-row :gutter="20" class="row-bg" type="flex" justify="space-between">
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-arrow-left" circle @click="back"></el-button>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">{{this.$route.params.title}}</div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="openSampleCascader">填写采样单</el-button>
          <el-button type="primary">质控安排</el-button>
          <el-button type="primary">采样前准备</el-button>
          <el-button type="primary">立项变更</el-button>
          <el-button type="primary">采样完结</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- <sampleForm/> -->
    <jztable :tableTitle="tableTitle" :tableData="tableData" @rowdbclick="rowdbclick"/>

    <el-dialog title="采样表单列表" width="20%" :visible.sync="newSamplingFormVisible">
      <cascaderForm :options="optionsSamplingForm" @handleChange="OpenNewForm"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openSampleForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog fullscreen :visible.sync="outerVisible">
      <!-- <el-dialog width="30%" title="选择采样单" :visible.sync="innerVisible" append-to-body>1111
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
        </div>
      </el-dialog>-->
      <sampleForm/>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">填写指定采样单 Dialog</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import cascaderForm from '@/components/input/cascader.vue'
import jztable from '@/components/JZTable.vue'
import sampleForm from './samplingForm.vue'
export default {
  components: {
    sampleForm,
    cascaderForm,
    jztable
  },
  data () {
    return {
      tableTitle: [
        { title: '表单编号', props: 'SamplingNo' },
        { title: '表单名称', props: 'FormName' },
        { title: '点位', props: 'AddreeName' },
        { title: '监测项目', props: 'TagName' },
        { title: '提交人', props: 'SubmitName' },
        { title: '监测人', props: 'MonitorPerson' },
        { title: '监测日期', props: 'MonitorTime' },
        { title: '状态', props: 'Status' }
      ],
      tableData: [
        {
          Id: '0000-0000-0000-00001',
          SamplingNo: '199222001212',
          FormName: '水和废水采样及交接记录',
          AddreeName: '大丰水厂',
          TagName: '硝酸盐',
          SubmitName: 'Admin',
          MonitorPerson: 'Admin',
          MonitorTime: '2019-02-12',
          Status: '等待提交'
        },
        {
          Id: '0000-0000-0000-000221',
          SamplingNo: '199222001212',
          FormName: '水和废水采样及交接记录',
          AddreeName: '大丰水厂',
          TagName: '硝酸盐',
          SubmitName: 'Admin',
          MonitorPerson: 'Admin',
          MonitorTime: '2019-02-12',
          Status: '等待提交'
        }
      ],
      newSamplingFormVisible: false,
      outerVisible: false,
      innerVisible: false,
      optionsSamplingForm: [
        {
          value: 'id1',
          label: '水',
          children: [
            {
              value: 'id11',
              label: '废水采样单'
            }
          ]
        }
      ]
    }
  },
  methods: {
    OpenNewForm (item) {
      console.log(item[1])
    },
    openSampleCascader () {
      this.newSamplingFormVisible = true
    },
    back () {
      this.$router.back('/Sampling/mission')
    },
    openSampleForm () {
      this.newSamplingFormVisible = false
      this.outerVisible = true
    },
    rowdbclick (row) {
      if (row.id !== '') {
        this.outerVisible = true
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.row-bg
  padding 10px 0
  background-color #f9fafc
.el-main
  padding-top 0px !important
</style>
